<template>
    <ul :class="turnPageButtonVisiblity">
        <li class="turn-page-button" :class="{ 'banned': bannedLeftTurnPageButton }" @click="leftAction"><i
                class="fa fa-arrow-left"></i></li>
        <li v-for="(_, name, index) in $slots" v-show="judgeShow(index)">
            <slot :name="name"></slot>
        </li>
        <li class="turn-page-button" :class="{ 'banned': bannedRightTurnPageButton }" @click="rightAction"><i
                class="fa fa-arrow-right"></i></li>
    </ul>
</template>

<script lang="ts" setup>
import { RowPageListOptions } from '@/types/ui';
import { computed, ref } from 'vue';
const { volume, step = 1, total, turnPageButtonVisiblity, firstPageTurnButtonAction, lastPageTurnButtonAction } = defineProps<RowPageListOptions>();
const lastPageOffset = Math.ceil((total - volume) / step) * step
const offset = ref(0)
function judgeShow(index: number) {
    if (index >= offset.value && index < offset.value + volume) return true;
}
function leftAction() {
    const mimusedValue = offset.value - step;
    if (mimusedValue < 0) {
        offset.value = firstPageTurnButtonAction === "toLast" ? lastPageOffset : 0;
    }
    else offset.value -= step
}
function rightAction() {
    const addedValue = offset.value + step;
    if (addedValue > lastPageOffset) {
        offset.value = lastPageTurnButtonAction === "toFirst" ? 0 : lastPageOffset;
    }
    else offset.value += step
}
const bannedLeftTurnPageButton = computed(() => {
    return firstPageTurnButtonAction !== 'toLast' && offset.value < lastPageOffset
})
const bannedRightTurnPageButton = computed(() => {
    return lastPageTurnButtonAction !== 'toFirst' && offset.value < 0
})
</script>

<style scoped>
ul {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

li.turn-page-button {
    cursor: pointer;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1%;
}

li.turn-page-button.banned {
    cursor: not-allowed;
}

ul.hovering-show li.turn-page-button {
    opacity: 0;
    transition: 0.3s;
}

ul.hovering-show li.turn-page-button:hover {
    opacity: 1;
}

ul.hovering-show li.turn-page-button.banned:hover {
    opacity: 0.8;
}

li.turn-page-button:not(.banned):hover {
    text-shadow: 0 0 5px gold;
}
</style>